<template>
  <ScrollArea :bot-margin="50">

  <div class="sub-header cap">
    {{ `${pprops.actions} Version List` }}
  </div>
  <q-table
  class="my-table"
    :rows="selfData"
    :columns="cols"
    :rows-per-page-options="[5]"
    @row-dblclick="openHistory"
    wrap-cells
  >
    <template v-slot:body-cell-serial_no="props">
      <q-td :props="props">
        {{ props.row.parts.serial_no }}
      </q-td>
    </template>

    <template v-slot:body-cell-update="props">
      <q-td :props="props">
        {{ formatDateTimeString(props.value) }}
      </q-td>
    </template>

    <template v-slot:body-cell-current="props">
      <q-td
        :props="props"
        :class="
          pprops.actions == 'software'
          ? versionStore.getSwStatusClass(
              props.row.stock_code,
              props.row.sw_ver
            ) 
          : versionStore.getHwStatusClass(
              props.row.stock_code,
              props.row.hw_ver
            ) 
        "
      >
        {{ pprops.actions == 'software' ? props.row.sw_ver: props.row.hw_ver }}
      </q-td>
    </template>

    <template v-slot:body-cell-latest="props">
      <q-td
        :props="props"
        :class="
          pprops.actions == 'software'
          ? versionStore.getSwStatusClass(
              props.row.stock_code,
              props.row.sw_ver
            ) 
          : versionStore.getHwStatusClass(
              props.row.stock_code,
              props.row.hw_ver
            ) 
        "
      >
        {{
          pprops.actions == 'software'
            ? versionStore.getswVer(props.row.parts.stock_code).join(',')
            : versionStore.gethwVer(props.row.parts.stock_code).join(',')
        }}
        <q-tooltip class="bg-indigo" :offset="[10, 10]">
          {{
            pprops.actions == 'software'
              ? 'Latest Version: ' +
                versionStore.getswVer(props.row.parts.stock_code).join(',')
              : 'Latest Version: ' +
                versionStore.gethwVer(props.row.parts.stock_code).join(',')
          }}
        </q-tooltip>
      </q-td>
    </template>

    <!-- <template v-slot:body-cell-action="props">
      <q-td>
        <div class="row justify-start">
          <q-btn
            class="q-px-sm"
            color="primary"
            flat
            icon="edit"
            @click="editFn(props.row.id)"
          />
          <q-btn
            class="q-px-sm"
            color="negative"
            flat
            icon="delete"
            @click="deleteFn(props.row.id)"
          />
        </div>
      </q-td>
    </template> -->
  </q-table>

  <div class="sub-header">
    {{ `Child ${pprops.actions} Version List` }}
  </div>
  <q-table
    class=" my-table"
    :rows="filterCHild"
    :columns="cols"
    :rows-per-page-options="[5]"
    wrap-cells
  >
    <template v-slot:body-cell-serial_no="props">
      <q-td :props="props">
        {{ props.row.parts.serial_no }}
      </q-td>
    </template>

    <template v-slot:body-cell-update="props">
      <q-td :props="props">
        {{ formatDateTimeString(props.value) }}
      </q-td>
    </template>

    <template v-slot:body-cell-current="props">
      <q-td
        :props="props"
        :class="
          pprops.actions == 'software'
            ? versionStore.getSwStatusClass(
                props.row.stock_code,
                props.row.sw_ver
              )
            : versionStore.getHwStatusClass(
                props.row.stock_code,
                props.row.hw_ver
              )
        "
      >
        {{ pprops.actions == 'software' ? props.row.sw_ver : props.row.hw_ver }}
      </q-td>
    </template>

    <template v-slot:body-cell-latest="props">
      <q-td
        :props="props"
        :class="
          pprops.actions == 'software'
            ? versionStore.getSwStatusClass(
                props.row.stock_code,
                props.row.sw_ver
              )
            : versionStore.getHwStatusClass(
                props.row.stock_code,
                props.row.hw_ver
              )
        "
      >
        {{
          pprops.actions == 'software'
            ? versionStore.getswVer(props.row.parts.stock_code).join(',')
            : versionStore.gethwVer(props.row.parts.stock_code).join(',')
        }}
        <q-tooltip class="bg-indigo" :offset="[10, 10]">
          {{
            pprops.actions == 'software'
              ? 'Latest Version: ' +
                versionStore.getswVer(props.row.parts.stock_code).join(',')
              : 'Latest Version: ' +
                versionStore.gethwVer(props.row.parts.stock_code).join(',')
          }}
        </q-tooltip>
      </q-td>
    </template>

   <!--  <template v-slot:body-cell-action="props">
      <q-td>
        <div class="row justify-start">
          <q-btn
            class="q-px-sm"
            color="primary"
            flat
            icon="edit"
            @click="editFn(props.row.id)"
          />
          <q-btn
            class="q-px-sm"
            color="negative"
            flat
            icon="delete"
            @click="deleteFn(props.row.id)"
          />
        </div>
      </q-td>
    </template> -->
  </q-table>
</ScrollArea>

  <q-dialog  v-model="history" full-width>
    <version-historylv2 :mode="pprops.actions" :part_id="editedRow.parts.id"></version-historylv2>
  </q-dialog>
</template>

<script setup lang="ts">
import { getPartsOrderHistory } from 'src/services/repairService';
import { Parts, PartVersion } from 'src/services/type';
import { ref, computed } from 'vue';
import { formatDateTimeString } from 'src/utils/dateUtils';
import { getChildPartsList, getPartsVersion } from 'src/services/partsService';
import { partVersionList } from 'src/services/partVersopmService';
import { useVersionStore } from 'src/stores/versionStore';
import VersionHistorylv2 from './VersionHistorylv2.vue';
import ScrollArea from '../ScrollArea.vue';

const versionStore = useVersionStore();
console.log(versionStore.versionMap);

const pprops = defineProps<{
  partItem: Parts;
  actions: 'software' | 'hardware';
}>();

const history = ref(false)

const editedRow = ref()

const sw_vers = ref();
const selfData = ref<PartVersion[]>([]);
const childData = ref<PartVersion[]>([]);
const align = 'left';
const cols = [
    {
    name: 'description',
    label: 'Short Description',
    field: 'description',
    format:(val, row)=>{
      return row.parts.description
    },
    sortable: true,
    align,
  },
  {
    name: 'serial_no',
    label: 'Serial No',
    field: 'serial_no',
    sortable: true,
    align,
  },
  {
    name: 'update',
    label: 'Latest Update Time',
    field: 'update',
    sortable: true,
    align,
  },
  {
    name: 'latest',
    label: 'Latest Version',
    field: 'latest',
    sortable: true,
    align,
  },
  {
    name: 'current',
    label: 'Current Version',
    field: 'current',
    sortable: true,
    align,
  },
];

const filterCHild = computed(() => {
  return childData.value;
});

async function init() {
  const res = await getChildPartsList(
    pprops.partItem.stock_code,
    pprops.partItem.serial_no
  );
  if (res.data && res.data.length > 0) {
    for (let d of res.data) {
      const ver = await partVersionList(d.id);
      console.log(ver);
      
      if (pprops.actions == 'software') {
        childData.value.push(ver.data[0]);
      }
      if (pprops.actions == 'hardware') {
        childData.value.push(ver.data[0]);
      }
    }
  } else {
    getVersion();
  }
}

async function getVersion() {
  const res = await partVersionList(pprops.partItem.id);
  if (res.data) {
    if (pprops.actions == 'software') {
    selfData.value.push(res.data[0]);
  }
  if (pprops.actions == 'hardware') {
    selfData.value.push(res.data[0]);
      }
  }
}
init();

function openHistory(evt:any, row:PartVersion, index:number){
  history.value = true
  editedRow.value = {...row}
}

</script>

<style scoped>
.box {
  display: inline-table;
  width: 20px;
  height: 100px;
  margin: 3px;
  color: black;
  border: solid black 1px;
  background-color: white;
}

.inner-box {
  writing-mode: vertical-lr;
  text-orientation: upright;
  font-size: 1rem;
}

.outer-box {
  display: flex;
  flex-wrap: wrap;
  background-color: #d9d9d9;
  width: fit-content;
  padding: 3px;
}

.box-container {
  display: flex;
  align-items: start;
}
table {
  border-collapse: collapse;
  table-layout: fixed;
}

table tbody tr {
  border-top: 1px solid #d9d9d9;
}

table thead {
  top: 0;
  background-color: white;
  z-index: 10;
}

.non-editable {
  pointer-events: none;
}

.editable {
  background-color: #94cde7;
}
.match {
  background-color: #b3ffd7;
}

.not-match,
.version-not-match,
.hardware-version-not-match,
.software-version-not-match {
  background-color: #ebc0c0;
}
</style>
